{extend name='public/base'/}
{block name='header'}{/block} {//关掉头部}
{block name='menu'}{/block} {//关掉菜单}
{block name='seo'}
<title>{$title|default="标题"}</title>
<meta name="keywords" content="{$keywords|default='关键字'}">
<meta name="description" content="{$desc|default='描述'}">
{/block}

{block name='content'}
<article class="cl pd-20">
    <form action="{:url('write')}" method="post" enctype="multipart/form-data" class="form form-horizontal">
   <!--     <div class="form">
                <label>班级:</label>
                <input type="text" name="class" />
                <br/>
                <label>学期:</label>
                <input type="text" name="times" />
                <br/>
                <input type="file" name="image" />
                <input type="submit" value="上传" />
        </div>
-->
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>班级：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value=""  placeholder="" id="class" name="class">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>学期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value=""  placeholder="" id="times" name="times">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>选择文件：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="file" class="input-text" value=""  placeholder="" id="image" name="image" onchange="previewImage(this)">
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input  type="submit" value="&nbsp;&nbsp;上传&nbsp;&nbsp;"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>图片预览：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <img width="380px" height="230px" id="preview"  alt="" />
            </div>
        </div>
    </form>

</article>
{/block}

{block name='js'}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>

<script>
    // 上传图片前预览
   function previewImage(file) {
        var MAXWIDTH = 120;  // 最大图片宽度
        var MAXHEIGHT = 120;  // 最大图片高度
        if (file.files && file.files[0]) {
            var img = document.getElementById('preview');
            img.onload = function () {
                var rect = getZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        } else {
            //兼容IE
            file.select();
            var src = document.selection.createRange().text;
            var img = document.getElementById('preview');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
        }
    }

   /* // 获取缩放的尺寸
    function getZoomParam(maxWidth, maxHeight, width, height) {
        var param = { top: 0, left: 0, width: width, height: height };
        if (width > maxWidth || height > maxHeight) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;
            if (rateWidth > rateHeight) {
                param.width = maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        return param;
    }*/

</script>


</script>


{/block}

</body>
</html>